<template>
  <div style="margin-top: 20px;margin-left: 100px">
    <p>当前时间: {{ currentTime }}</p>
    <h2>{{title}}</h2>

    <el-button type="success" @click="handleAdd">新增</el-button>


    <el-table :data="data.tableData" stripe style="width: 60%">
      <el-table-column prop="date" label="日期" width="300" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" width="300" />
      <el-table-column label="操作"  #default="scope">
        <el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)"> 编辑</el-button>
        <el-button size="small" type="danger"  @click="handleDelete(scope.$index, scope.row)">删除 </el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script  setup>

import {ref, reactive, onMounted, onUnmounted} from 'vue';
import {ElMessage} from "element-plus";

const title = "人员管理";

//响应式数据
const data  = reactive({tableData:[
    {
      date: '2024-7-02',
      name: '冯老师',
      address: '成都市郫都区',

    },
    {
      date: '2024-7-02',
      name: '肖老师',
      address: '成都市郫都区',
    },
    {
      date: '2024-7-02',
      name: '张老师',
      address: '成都市郫都区',
    },
    {
      date: '2024-07-01',
      name: '夏老师',
      address: '成都市郫都区',
    },
  ]})

let   studentIndex = 0;

//添加人员
const  handleAdd = ()=>{
  data.tableData.push({
        date: '2024-7-02',
        name: '学生'+studentIndex,
        address: '成都市郫都区 菁蓉镇',
      }
  );
  studentIndex++;

}
//编辑人员
const  handleEdit = (index,row)=>{
  ElMessage({
    message: '你点击了编辑按钮要编辑Index为'+index+"的数据",

    type: 'success',
  })
  console.log(row)
}
//删除人员
const  handleDelete = (index,row)=>{
  ElMessage({
    message: '你点击了删除按钮 要删除Index为'+index+"的数据",
    type: 'warning',
  })
  console.log(row)

}



//用ref定义当前时间
const currentTime = ref('');
const updateTime = () => {
  const now = new Date();
  //获取当前时间
  currentTime.value = now.toLocaleString()
};

//程序加载时的钩子函数
onMounted(() => {
  updateTime(); // 初始更新时间
  const intervalId = setInterval(updateTime, 1000); // 每秒更新一次时间
  onUnmounted(() => clearInterval(intervalId)); // 清除定时器
});


</script>